<script setup>
import "./style.css";
import { ref } from "vue"
import VueTree from "../VueD3Tree/index.vue"
import { fakeData1, linkStyle1, linkStyle2 } from "./fakeData"

const treeData = ref(fakeData1);

const linkType = ref("straight")
const linkStyle = ref("1")

</script>

<template>
  <div class="demo-main">
    <div>
      <div>
        <label>类型:</label>
        <label><input type="radio"  value="straight" v-model="linkType">直线</label>
        <label><input type="radio"  value="curve" v-model="linkType">曲线</label>
      </div>
      <div>
        <label>样式:</label>
        <label><input type="radio"  value="1" v-model="linkStyle">样式1</label>
        <label><input type="radio"  value="2" v-model="linkStyle">样式2</label>
      </div>
      <div class="canvas-container">
        <VueTree
          :data="treeData"
          :lineType="linkType"
          :line-style="linkStyle === '1' ? linkStyle1: linkStyle2"
          default-node-key="name"
          collapsed-way="clickTreeNode"
        />
      </div>
    </div>
  </div>
</template>
<style scoped>
.canvas-container {
  width: 700px;
  height: 300px;
  border-radius: 5px;
  border: 1px solid gray;
}
</style>